
import { Button, Card, Form, Checkbox, Select, Input, DatePicker, message } from 'antd';
import { useEffect, useState } from 'react';
import moment from 'moment';
import {
  getusrRepotInfo,
  putusrRepotInfo,
} from '@/services/baseinfo'
const NewMessage: React.FC = (props: any) => {
  const [form] = Form.useForm();
  const [componentDisabled, setComponentDisabled] = useState<boolean>(true);//设置组件是否可填
  const [needPick, setneedPick] = useState<any>();  //是否接站
  const [userInfo, setUserInfo] = useState(null); // 用于保存接口返回的用户接站信息
  // 定义表单的初始值，根据您的需求设置每个表单字段的初始值
  const initialValues = {
    travelType: userInfo?.travelType,
    departurePlace: userInfo?.departurePlace,
    departureTime: moment(`${userInfo?.departureTime}`),
    isPickup: userInfo?.isPickup,
    destination: userInfo?.destination,
    arrivalTime: moment(`${userInfo?.arrivalTime}`),
  };
  useEffect(() => {
    // 在组件加载时调用接口函数
    fetchData();
  }, []);
  //获取表单信息接口
  const fetchData = async () => {
    try {
      // 调用接口函数并传递必要的参数
      const response = await getusrRepotInfo(null, null);
      // 处理返回的数据
      if (response && response.result) {
        setUserInfo(response.result); // 将接口返回的数据保存到状态中
      }
    } catch (error) {
      console.error('Error fetching user info:', error);
    }
  };
  //提交表单
  const onFinish = (values: any) => {
    console.log('表单提交的值：', values);
    values.arrivalTime = values.arrivalTime.format('yyyy-MM-DD HH:mm:ss')
    values.departureTime = values.departureTime.format('yyyy-MM-DD HH:mm:ss')
    console.log('时间更改后', values);
    putusrRepotInfo(null, values)
      .then((response) => {
        console.log('API response:', response.code);
        if (response?.code == '200') {
          message.success("提交成功")
        } else message.error("提交失败")
      })
      .catch((error) => {
        console.error('API error:', error);
      });
  };
  // 重置表单
  const onReset = () => {
    form.resetFields();
  };
  //确定是否需要接站
  const handleNeedChange = (value: string) => {
    console.log('是否需要接站:', value)
    if (value === '否') {
      form.setFieldsValue({ endPlace: undefined }); // 设置"到达地点"为空
    }
    setneedPick(value);
  };
  if (userInfo === null || userInfo === undefined) {
    return <p>Loading...</p>;
  }
  return (
    <Card >
      <Checkbox
        checked={componentDisabled}
        onChange={(e) => setComponentDisabled(e.target.checked)}
      >
        信息有错?点击更改!
      </Checkbox>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 10 }}
        form={form}
        disabled={componentDisabled}
        initialValues={initialValues} // 设置表单的初始值
        name="control-hooks"
        onFinish={onFinish}
        style={{ maxWidth: 800 }}
      >
        <Form.Item name="travelType" label="出行交通类型" rules={[{ required: true }]}>
          <Select >
            <Select.Option value="1">自驾</Select.Option>
            <Select.Option value="0">公共交通</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item name="departurePlace" label="出发地点" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="departureTime" label="出发时间" rules={[{ required: true }]}>
          <DatePicker showTime={{ format: 'HH:mm:ss' }} />
        </Form.Item>
        <Form.Item name="isPickup" label="是否需要接站" rules={[{ required: true }]}>
          <Select onChange={handleNeedChange}>
            <Select.Option value="1">是</Select.Option>
            <Select.Option value="0">否</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item name="destination" label="到达地点">
          <Select disabled={componentDisabled || needPick === '否'}>
            <Select.Option value="0">天津站</Select.Option>
            <Select.Option value="1">天津西站</Select.Option>
            <Select.Option value="2">天津南站</Select.Option>
            <Select.Option value="3">滨海国际机场</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item name="arrivalTime" label="到达时间" rules={[{ required: true }]}>
          <DatePicker showTime={{ format: 'HH:mm:ss' }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginLeft: 150, width: 150 }}>
            确定更改
          </Button>
          <Button htmlType="button" onClick={onReset} style={{ marginLeft: 150, marginTop: 20, width: 150 }}>
            放弃修改
          </Button>
        </Form.Item>
      </Form>
    </Card>

  );
};
export default NewMessage
